<template>
  <div class="menu-management-page">
    <div class="search-wrapper">
      <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle"></super-search>
    </div>
    <div class="content-wrapper">
      <div class="operation-btn-wrapper">
        <a-button type="default" @click="expandAllEvent">展开</a-button>
        <a-button type="default" @click="clearExpandEvent">折叠</a-button>
      </div>
      <super-table
        ref="tableRef"
        :height="tableHeight"
        :loading="loading"
        :tree-config="{ transform: true, childrenField: 'children', rowField: 'id', parentField: 'pid' }"
        :has-pagination="false"
        :data="tableData"
        :column="tableColumn"
        @toggle-tree-expand="toggleExpandChangeEvent"
      >
        <template #status="{ row }">
          <a-tag v-if="row.status === 1" color="#108ee9">可见</a-tag>
          <a-tag v-else-if="row.status === 0" color="#f50">不可见</a-tag>
        </template>
        <template #type="{ row }">
          <a-tag v-if="row.type === 1" color="#108ee9">目录</a-tag>
          <a-tag v-else-if="row.type === 2" color="#87d068">菜单</a-tag>
          <a-tag v-else-if="row.type === 3" color="#f50">按钮</a-tag>
        </template>
        <template #action="{ row }">
          <a-button type="link" :danger="row.status === 1" @click="changeStatusHandle(row)">{{ row.status === 1 ? "停用" : "启用" }}</a-button>
        </template>
      </super-table>
    </div>
  </div>
</template>
<script lang="ts">
import { nextTick, onMounted } from "vue";
export default {
  name: "MenuManagement"
};
</script>
<script lang="ts" setup>
import { searchItemList, tableColumn } from "./data";
import { getListApi } from "@/api/configCenter/menuManagement";
import SuperSearch from "@/components/superSearch/index.vue";
import SuperTable from "@/components/superTable/index.vue";
import TableHeightHook from "@/hook/tableHeightHook";
import OperationHook from "./composables/operationHook";
import InitHook from "./composables/initHook";
const { tableHeight, loading } = TableHeightHook(20);
const searchHandle = () => {
  loading.value = true;
  return getListApi(searchForm)
    .then((res: any) => {
      const { code, data } = res;
      if (code === 200) {
        tableData.value = data;
        const $table = tableRef.value.xTable;
        if ($table) {
          nextTick(() => {
            const expand = data.filter((t: any) => expandRows.value.includes(t.id));
            $table.setTreeExpand(expand, true);
          });
        }
      }
    })
    .finally(() => {
      loading.value = false;
    });
};
const { searchForm, tableData, tableRef, expandRows } = InitHook();
const { expandAllEvent, clearExpandEvent, toggleExpandChangeEvent, changeStatusHandle } = OperationHook({
  tableRef,
  searchHandle,
  expandRows
});
onMounted(() => {
  searchHandle();
});
</script>
<style lang="stylus" scoped>
.menu-management-page{
  .operation-btn-wrapper{
    padding-bottom: 8px;
    :deep(.ant-btn){
      margin-right: 8px;
    }
  }
}
</style>
